<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <title>单据统计页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <script src="../js/echarts.js"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>出入库商品数量统计</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form id="orderSum" class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <label><input name="byYear" type="text" class="layui-input" id="byYear" placeholder="~"></label>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button id="searchBtn1" type="button" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i>按年统计
                            </button>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <label><input name="byMonth" type="text" class="layui-input" id="byMonth" placeholder="~"></label>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button id="searchBtn2" type="button" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i>按月统计
                            </button>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <label><input name="byDay" type="text" class="layui-input" id="byDay" placeholder="~"></label>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button id="searchBtn3" type="button" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i>按日统计
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['form', 'table', 'layer', 'laydate'], function () {
        let $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            laydate = layui.laydate;

        laydate.render({
            elem: '#byYear',
            type: 'year',
            range: '~'
        });
        laydate.render({
            elem: '#byMonth'
            ,type: 'month'
            ,range: '~'
            ,format: 'yyyy-MM'
        });
        laydate.render({
            elem: '#byDay'
            ,type: 'date'
            ,range: '~'
            ,format: 'yyyy-MM-dd'
        });

        $("#searchBtn1").on("click", function () {
            let year = $("#byYear").val();
            if (year === '-' || year === null || year === '') {
                year = '0000-9999'
            }
            console.log(year);
            table.render({
                elem: '#currentTableId',
                url: '/statistics?action=statisticsByYearInfo', // 发送请求的地址
                where: {
                    byYear: year
                },
                cols: [[
                    {field: 'name', title: '名称'},
                    {field: 'orYear', title: '年份', sort: true},
                    {field: 'count', title: '数量(kg)', sort: true},
                    {field: 'state', title: '出/入库', sort: true}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                page: false,
                skin: 'line'
            }); //end table.render
            $("#byYear").val("");
        }).click(); //end  $("#searchBtn1")
        $("#searchBtn2").on("click", function () {
            let month = $("#byMonth").val();
            if (month === '-' || month === null || month === '') {
                month = '0000-01 ~ 9999-12'
            }
            console.log(month);
            table.render({
                elem: '#currentTableId',
                url: '/statistics?action=statisticsByMonthInfo', // 发送请求的地址
                where: {
                    byMonth: month
                },
                cols: [[
                    {field: 'name', title: '名称'},
                    {field: 'orMonth', title: '年月', sort: true},
                    {field: 'count', title: '数量(kg)', sort: true},
                    {field: 'state', title: '出/入库', sort: true}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                page: false,
                skin: 'line'
            }); //end table.render
            $("#byMonth").val("");
        }); //end  $("#searchBtn2")
        $("#searchBtn3").on("click", function () {
            let day = $("#byDay").val();
            if (day === '-' || day === null || day === '') {
                day = '0000-01-01 ~ 9999-12-31'
            }
            console.log(day);
            table.render({
                elem: '#currentTableId',
                url: '/statistics?action=statisticsByDayInfo', // 发送请求的地址
                where: {
                    byDay: day
                },
                cols: [[
                    {field: 'name', title: '名称'},
                    {field: 'orDay', title: '日期', sort: true},
                    {field: 'count', title: '数量(kg)', sort: true},
                    {field: 'state', title: '出/入库', sort: true}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                page: false,
                skin: 'line'
            }); //end table.render
            $("#byDay").val("");
        }); //end  $("#searchBtn2")

    });


</script>
</body>
</html>
